<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>开发者列表</title>
        <!-- 引入 Bootstrap -->
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>

    <style>
        a{
            color: #c5c5c5;
        }

        h1{
            /*文字对齐*/
            text-align: center;
        }

        th{
            text-align: center;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            align-items: center;
            justify-content: center;
        }

        .modal-header {
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }

        .modal-content {
            background-color: #f9f9f9;
            margin: 10% auto;
            padding: 20px;
            border: 1px solid #ccc;
            width: 400px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>

    <body>
        <div>
            <h1 style="color: #727272">文档应用</h1>
            <button id="addDeveloper" class="btn btn-primary btn-lg btn-block">新增</button>
        </div>

        <table id="developerTable" class="table table-striped table-bordered table-hover text-center">
            <thead>
            <tr style="text-align:center">
                <th>devId</th>
                <th>名称</th>
                <th>disable</th>
                <th>delFlag</th>
                <th>appId</th>
                <th>aeskey</th>
                <th>token</th>
                <th>操作</th>
            </tr>
            </thead>
            <tr th:each="developer:${developers}">
                <td th:text="${developer.getDevId()}"></td>
                <td th:text="${developer.getName()}"></td>
                <td th:text="${developer.getDisable()}"></td>
                <td th:text="${developer.getDelFlag()}"></td>
                <td th:text="${developer.getAppid()}"></td>
                <td th:text="${developer.getAeskey()}"></td>
                <td th:text="${developer.getToken()}"></td>
                <td>
                    <!--         a标签用来定义超链接 href表示超链接-->
                    <a th:if="${developer.getDisable() == 0}" class="btn btn-primary" th:href="@{'/thy/developer/update/disable/'+${developer.getDevId()}}">禁用</a>
                    <a th:if="${developer.getDisable() == 1}" class="btn btn-primary" th:href="@{'/thy/developer/update/disable/'+${developer.getDevId()}}">启用</a>
                    <a class="btn btn-danger" th:href="@{'/thy/developer/update/del_flag/'+${developer.getDevId()}}">删除</a>
<!--                    <a th:if="${developer.getDisable() == 0}" class="btn btn-primary" >禁用</a>-->
<!--                    <a th:if="${developer.getDisable() == 1}" class="btn btn-primary" >启用</a>-->
<!--                    <a class="btn btn-danger" th:href="@{'/developer/update/del_flag/'+${developer.getDevId()}}">删除</a>-->
                </td>
            </tr>
        </table>

        <!-- 新增 - 弹框部分 -->
        <div id="addModel" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="addClose">&times;</button>
                </div>
                <form action="/developer" method="post" id="addForm">
                    <div>
                        <label for="addName">开发者名称:</label>
                        <input type="text" id="addName" name="name" required>
                    </div>
                    <div style="align-items: center">
                        <button type="submit">提交</button>
                    </div>
                </form>
            </div>
        </div>

        <script src="/js/jquery-3.5.1.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function () {

                // 打开弹框
                var openModalBtn = document.getElementById("addDeveloper");
                var addModal = document.getElementById("addModel");
                openModalBtn.addEventListener("click", function () {
                    document.getElementById("addName").value = ''; // 填充开发者名称到文本框
                    addModal.style.display = "block";
                });

                // 表单校验
                var addForm = document.getElementById("addForm");
                addForm.addEventListener("submit", function (event) {
                    event.preventDefault(); // 阻止表单默认提交行为

                    // 构建 JSON 对象
                    var formData = new FormData(addForm);
                    var jsonData = {};
                    for (var [key, value] of formData.entries()) {
                        jsonData[key] = value;
                    }

                    // 发送 PUT 请求
                    var xhr = new XMLHttpRequest();
                    xhr.open('POST', "/developer");
                    xhr.setRequestHeader("Content-Type", "application/json");
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState === XMLHttpRequest.DONE) {
                            if (xhr.status === 200) {
                                // 请求成功处理逻辑
                                console.log("提交成功", xhr.responseText);
                                // 关闭弹框
                                addModal.style.display = "none";
                                // 刷新
                                location.reload();
                            } else {
                                console.error("提交失败");
                                // 在此处添加处理失败的逻辑
                            }
                        }
                    };
                    xhr.send(JSON.stringify(jsonData));
                });

                // 关闭弹框
                var addCloseModalBtn = document.getElementsByClassName("addClose")[0];
                addCloseModalBtn.addEventListener("click", function () {
                    addModal.style.display = "none";
                });
            });
        </script>

    </body>

</html>
